<template>
	<view class="page-view ">
		<image src="../../static/bg3.png" mode="widthFix" class="bg"></image>
		<cu-custom ref="cuCustom" :isBack="true" bgImage="noImage"></cu-custom>
		<view class="main ">
			<image src="../../static/bannertxt2.png" mode="widthFix" class="banertxt"></image>
			<view class="resultbox">
				<view class="totalscore flex align-end  justify-center">
					<view>您的成绩单:</view>
					<text class="score">{{ total }}</text>
					<view class="score">分</view>
				</view>
				<view class="scorelist flex justify-center">
					<view class="score-item">
						<view class="text-bold">综合能力</view>
						<view class="flex align-center text-orange">
							<text>总得分:</text>
							<view class="score">{{ scorelist.gzScore || 0 }}</view>
							<!-- <text>分</text> -->
						</view>
						<view class="flex align-center">
							<text>客观题:</text>
							<view class="score">{{ gzkgScore }}</view>
							<!-- <text>分</text> -->
						</view>
						<view class="flex align-center">
							<text>主观题:</text>
							<view class="score">{{ gzzgScore }}</view>
							<!-- <text>分</text> -->
						</view>
						<view class="btn" @tap="estimate(0)"><image src="../../static/btn.png" mode="widthFix"></image></view>
					</view>
					<view class="score-item">
						<view class="text-bold">英语二</view>
						<view class="flex align-center text-orange">
							<text>总得分:</text>
							<view class="score">{{ scorelist.enScore || 0 }}</view>
							<!-- <text>分</text> -->
						</view>
						<view class="flex align-center">
							<text>客观题:</text>
							<view class="score">{{ enkgScore }}</view>
							<!-- <text>分</text> -->
						</view>
						<view class="flex align-center">
							<text>主观题:</text>
							<view class="score">{{ enzgScore }}</view>
							<!-- <text>分</text> -->
						</view>
						<view class="btn" @tap="estimate(1)"><image src="../../static/btn.png" mode="widthFix"></image></view>
					</view>
				</view>

				<button class="redBtn" @tap="showProbability">查上岸概率</button>
			</view>
			<!-- <view class="ad" v-if="img" @tap="viewQr(img)"><image :src="fileUrl + img" mode="widthFix"></image></view>
			<view class="ad" v-if="adInfo"><image :src="fileUrl + adInfo" mode="widthFix"></image></view> -->
			<!-- <view class="videobox flex align-center" @tap="openViode">
				<view class="flex-sub flex flex-direction justify-center">
					<view>考研之后我们还应该做这些~</view>
					<view class="btn">点击观看视频</view>
				</view>
				<image src="../../static/play2.png" mode="widthFix "></image>
			</view> -->
			<goods></goods>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import goods from '@/components/goods.vue';
export default {
	data() {
		return {
			adInfo: '',
			fileUrl: 'https://apps.guoyamba.com/',
			img: ''
		};
	},
	created() {
		// this.getNewsLink();
		// this.getConfigList();
	},
	components: { goods },
	computed: {
		...mapState(['openid', 'scorelist', 'queStateList', 'qrimg']),
		total() {
			var num = 0;
			if (this.scorelist) {
				if (this.scorelist.gzScore) {
					num += this.scorelist.gzScore;
				}
				if (this.scorelist.enScore) {
					num += this.scorelist.enScore;
				}
			}
			return num;
		},
		enkgScore() {
			var num = 0;
			if (this.scorelist) {
				['en1Score', 'en2Score'].forEach(item => {
					if (this.scorelist[item]) {
						num += this.scorelist[item];
					}
				});
			}
			return num;
		},
		enzgScore() {
			var num = 0;
			if (this.scorelist) {
				['en3Score', 'en4Score'].forEach(item => {
					if (this.scorelist[item]) {
						num += this.scorelist[item];
					}
				});
			}
			return num;
		},
		gzkgScore() {
			var num = 0;
			if (this.scorelist) {
				['gz1Score', 'gz2Score', 'gz3Score'].forEach(item => {
					if (this.scorelist[item]) {
						num += this.scorelist[item];
					}
				});
			}
			return num;
		},
		gzzgScore() {
			var num = 0;
			if (this.scorelist) {
				['gz4Score'].forEach(item => {
					if (this.scorelist[item]) {
						num += this.scorelist[item];
					}
				});
			}
			return num;
		}
	},
	methods: {
		...mapMutations(['saveQueState', 'setQrimg']),
		//立即估算
		estimate(type) {
			let queStateList = { ...this.queStateList };
			if (type == 0) {
				['gz1', 'gz2', 'gz3', 'gz4'].forEach(item => {
					queStateList[item] = {};
				});
			}
			if (type == 1) {
				['en1', 'en2', 'en3', 'en4'].forEach(item => {
					queStateList[item] = {};
				});
			}
			this.saveQueState(queStateList);
			uni.navigateTo({
				url: '/pages/answer/answer?type=' + (type == 0 ? 'gz' : 'en') + '&isRestEstimate=1'
			});
		},
		//常看上岸概率
		showProbability(e) {
			let { enScore, gzScore } = this.scorelist;
			uni.navigateTo({
				url: `/pages/probability/probability?enScore=${enScore || 0}&gzScore=${gzScore || 0}`
			});
		},
		getNewsLink() {
			// this.$getajax(this.$api.getNewsLink, {
			// 	code: 'g1'
			// }).then(da => {
			// 	this.adInfo = da.data;
			// });
			this.$postajax(this.$api.getConfigList, { type: 'system', code: 'wxpic4' }).then(da => {
				if (da.code == 200) {
					this.adInfo = da.data[0].name;
				}
			});
		},
		showNews() {
			uni.navigateTo({
				url: '/pages/webView/webView?weburl=' + encodeURIComponent(this.adInfo.newsLink)
			});
		},
		getConfigList() {
			this.$postajax(this.$api.getConfigList, { type: 'system', code: 'wxpic2' }).then(da => {
				if (da.code == 200) {
					this.img = da.data[0].name;
				}
			});
		},
		ViewImage(img) {
			uni.previewImage({
				urls: [this.fileUrl + img],
				current: this.fileUrl + img
			});
		},
		viewQr() {
			if (this.qrimg) {
				uni.previewImage({
					urls: [this.qrimg],
					current: this.qrimg
				});
			} else {
				/* 查询二维码图片 */
				this.$postajax(this.$api.getConfigList, { type: 'system', code: 'wxpic3' }).then(da => {
					if (da.code == 200 && da.data.length > 0) {
						let qrimg = da.data[0].name;
						this.setQrimg(this.fileUrl + qrimg);
						uni.previewImage({
							urls: [this.fileUrl + qrimg],
							current: this.fileUrl + qrimg
						});
					}
				});
			}
		}
	},
	onShareAppMessage(res) {
		var url = '/pages/index/index';
		return {
			title: '果芽MBA MEM MPA 联考估分',
			path: url,
			imageUrl: 'https://apps.guoyamba.com/share01.png'
		};
	}
};
</script>

<style lang="scss">
page,
.page-view {
	height: 100%;
	position: relative;
	background: #fff;
	.bg {
		display: block;
		width: 100%;
		height: 543rpx;
		position: absolute;
	}
	.text-orange {
		color: #da6554;
	}
	.main {
		position: relative;
		z-index: 1;
		min-height: 0;
		padding-bottom: calc(env(safe-area-inset-bottom) / 2 + 20rpx);
		.banertxt {
			width: 516rpx;
			height: 210rpx;
			margin: 40rpx auto 160rpx;
			display: block;
		}
		.resultbox {
			width: 674rpx;
			height: 641rpx;
			margin: 0 auto;
			text-align: center;
			background: url(../../static/resultbg.png) no-repeat top center;
			background-size: 100% auto;
			text-align: center;
			color: #090909;
			padding-top: 46rpx;
			.totalscore {
				font-size: 47rpx;
				text-align: center;
				line-height: 1;
				.score {
					color: #5483db;
					font-size: 62rpx;
				}
			}
			.scorelist {
				margin-top: 48rpx;
				.score-item {
					padding: 0 55rpx 0;
					position: relative;
					font-size: 32rpx;
					& > view {
						margin-bottom: 8rpx;
						&.text-bold {
							margin-bottom: 24rpx;
							font-size: 38rpx;
						}
					}
					.score {
						border: 1px solid rgba(0, 0, 0, 0.35);
						width: 68rpx;
						height: 43rpx;
						text-align: center;
						line-height: 34rpx;
						background: #fafafa;
						margin: 0 10rpx;
					}
					& + .score-item::before {
						content: '';
						display: block;
						width: 1px;
						background: #c3c3c3;
						height: 250rpx;
						position: absolute;
						left: 0;
						top: 30rpx;
					}
				}
			}
			.btn {
				display: block;
				width: 171rpx;
				height: 47rpx;
				margin: 40rpx auto 0;
			}
			.redBtn {
				margin-top: 35rpx;
				min-width: 500rpx;
				padding: 0 20rpx;
				color: #fff;
				background: #da6554;
				text-align: center;
				border-radius: 20upx;
				line-height: 75upx;
				font-size: 48upx;
				display: inline-block;
				box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.2);
			}
		}
		.ad {
			margin: 30rpx auto 10rpx;
			// border-radius: 20rpx;
			width: 658rpx;
			overflow: hidden;
			image {
				display: block;
				width: 100%;
			}
		}
		.videobox {
			margin: 0 40rpx;
			height: 199rpx;
			box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.2);
			background: #fff;
			border-radius: 10rpx;
			overflow: hidden;
			font-size: 28rpx;
			color: #353535;
			padding-left: 25rpx;
			.btn {
				color: #fff;
				width: 132rpx;
				line-height: 32rpx;
				text-align: center;
				font-size: 14rpx;
				margin-top: 25rpx;
				background: #da6554;
				border-radius: 20rpx;
			}
			image {
				display: block;
				width: 51rpx;
				height: 51rpx;
				margin: 0 45rpx;
			}
		}
	}
}
</style>
